#{extends 'tags/layouts/main.html' /}
#{set title:'Journey' /}

<div class="media media-profile">
    <a href="javascript:;" class="pull-left">
        <img src="${data.user.photo}" alt="" class="media-object rounded-corner">
    </a>
    <div class="media-body">
        <h5 class="media-heading">${data.user.firstname} ${data.user.lastname}</h5>
        <p>${data.user.description}</p>
    </div>
</div>
                                    
<ul class="nav nav-tabs nav-tabs-inverse nav-justified nav-justified-mobile">
    <li class=""><a href="@@{Profile.index(data.user.user_id)}"><i class="fa fa-edit m-r-5"></i> <span class="hidden-xs">Posts</span></a></li>
    <li class="active"><a href=""><i class="fa fa-paper-plane m-r-5"></i> <span class="hidden-xs">Journey</span></a></li>
    <li class=""><a href="@@{Profile.point(data.user.user_id)}"><i class="fa fa-map-marker m-r-5"></i> <span class="hidden-xs">Points</span></a></li>
</ul>
                    
<!-- begin timeline -->
<ul class="result-list">
    #{list items:data.journeys, as:'journey'}
    <li>
        <div class="result-image">
            <a href="javascript:;"><img src="/public/assets/img/journey_01.png" alt=""></a>
        </div>
        <div class="result-info">
            <h4 class="title"><a href="javascript:;">${journey.name}</a></h4>
            <p class="location">${journey.created_date}</p>
            <p class="desc">
                ${journey.note}
            </p>
            <div class="btn-row">
                <a onClick="share(${journey.journey_id});" data-toggle="tooltip" id="${journey.journey_id}" data-container="body" data-title="Users" data-original-title="" title=""><i class="fa fa-fw fa-user"></i></a>
            </div>
        </div>
        <div class="result-price">
            <a href="@@{Journey.index(journey.journey_id)}" class="btn btn-inverse btn-block">View Details</a>
        </div>
    </li>
    #{/list}
</ul>
<div class="modal fade" id="share_modal" aria-hidden="true" style="display: none;">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">				
				<h4 class="modal-title">Share Journey</h4>
			</div>
			<div class="modal-body">
			</div>
			<div class="modal-footer">
				<a class="btn btn-sm btn-white" data-dismiss="modal">Close</a>
			</div>
		</div>
	</div>
</div>
<!-- end timeline -->
<script type="text/javascript">
function share(journey_id){	
	$.ajax({
		type: "POST",
		url: '/profile/get_friend',
		data :{
			position_id: 1
		},
		success: function(data) {
			var html = '';
			$('.modal-body').html("");
			//alert(data.friends.length);
			for(i=0;i<data.friends.length;i++) {		        		        		            		       		       
				html += '<li> <a ><img src='+'"'+data.friends[i].photo+'"'+ '><a onClick="shareJourney('+data.friends[i].user_id+','+journey_id+');" class="btn btn-sm btn-success" id="share_button_'+data.friends[i].user_id+'">Share</a>';
				html += '<h4 class="username text-ellipsis">';
				html+= data.friends[i].firstname+data.friends[i].lastname;
				html+= '<small>'+data.friends[i].region+'</small>';
				html+= ' </h4> </li> ';
		}
			$('.modal-body').append(html);
			$('#share_modal').modal('show');
		}
		});
}
function shareJourney(user_id,journey_id){
	$.ajax({
		type: "POST",
		url: '/application/shareJourney',
		data :{
			user_id: user_id,
			journey_id : journey_id
		},
		success: function(data) {
			var html = 'share_button_'+user_id;
			$('#'+html).hide();
		}
		});
	
}
</script>